<template>
  <div ref="echartsRef" class="card content-box"></div>
</template>

<script setup lang="ts" name="waterChart">
import { ref, onMounted } from "vue";
import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
import "echarts-liquidfill";

const echartsRef = ref<HTMLElement>();
onMounted(() => {
  let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  let value = 0.5;
  let data = [value, value, value];
  let option: echarts.EChartsCoreOption = {
    title: [
      {
        text: "预约量",
        x: "25%",
        y: 30,
        textAlign: "center",
        textStyle: {
          color: "#a1a1a1",
          fontSize: 16,
          fontFamily: "Microsoft Yahei",
          fontWeight: "100",
          textAlign: "center"
        }
      },
      {
        text: "实时客流量",
        x: "75%",
        y: 30,
        textAlign: "center",
        textStyle: {
          color: "#a1a1a1",
          fontSize: 16,
          fontFamily: "Microsoft Yahei",
          fontWeight: "100",
          textAlign: "center"
        }
      },
      {
        text: (value * 100).toFixed(0) + "%",
        left: "25%",
        top: "38%",
        textAlign: "center",
        textStyle: {
          fontSize: "50",
          fontWeight: "300",
          color: "#a06a0a",
          textAlign: "center",
          textBorderColor: "rgba(0, 0, 0, 0)",
          textShadowColor: "#fff",
          textShadowBlur: "0",
          textShadowOffsetX: 0,
          textShadowOffsetY: 1
        }
      },
      {
        text: (value * 100).toFixed(0) + "%",
        left: "75%",
        top: "38%",
        textAlign: "center",
        textStyle: {
          fontSize: "50",
          fontWeight: "300",
          color: "#02456d",
          textAlign: "center",
          textBorderColor: "rgba(0, 0, 0, 0)",
          textShadowColor: "#fff",
          textShadowBlur: "0",
          textShadowOffsetX: 0,
          textShadowOffsetY: 1
        }
      }
    ],
    series: [
      {
        type: "liquidFill",
        radius: "50%",
        z: 6,
        center: ["25%", "50%"],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(251, 173, 23, 0)"
              },
              {
                offset: 0.5,
                color: "rgba(251, 173, 23, .2)"
              },
              {
                offset: 0,
                color: "rgba(251, 173, 23, 1)"
              }
            ],
            globalCoord: false
          }
        ],
        data: data,
        backgroundStyle: {
          borderWidth: 1,
          color: "transparent"
        },
        label: {
          normal: {
            formatter: ""
          }
        },
        outline: {
          show: true,
          itemStyle: {
            borderWidth: 0
          },
          borderDistance: 0
        }
      },
      {
        name: "第二层白边",
        type: "pie",
        z: 3,
        radius: ["0%", "55%"],
        center: ["25%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fefefe"
                  },
                  {
                    offset: 1,
                    color: "#e7e8ea"
                  }
                ])
              }
            }
          },
          {
            value: 0,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ]
      },
      {
        name: "最外绿边",
        type: "pie",
        z: 1,
        radius: ["0%", "58%"],
        center: ["25%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#fdc56e"
            }
          },
          {
            value: 0,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ]
      },
      {
        type: "liquidFill",
        radius: "50%",
        z: 6,
        center: ["75%", "50%"],
        color: ["#c1dce7", "#90d3f0", "#009bdb"],
        data: [0.6, { value: 0.5, direction: "left" }, 0.4, 0.3],
        backgroundStyle: {
          borderWidth: 1,
          color: "transparent"
        },
        label: {
          normal: {
            formatter: ""
          }
        },
        outline: {
          show: true,
          itemStyle: {
            borderWidth: 0
          },
          borderDistance: 0
        }
      },
      {
        name: "第二层白边",
        type: "pie",
        z: 3,
        radius: ["0%", "55%"],
        center: ["75%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fefefe"
                  },
                  {
                    offset: 1,
                    color: "#e7e8ea"
                  }
                ])
              }
            }
          },
          {
            value: 0,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ]
      },
      {
        name: "最外蓝边",
        type: "pie",
        z: 1,
        radius: ["0%", "58%"],
        center: ["75%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#07a2e3"
            }
          },
          {
            value: 0,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ]
      }
    ]
  };
  useEcharts(myChart, option);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
